<template>
  <div class="config-info">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="商户配置" name="first">
        <el-form
          label-position="right"
          label-width="auto"
          :model="formLabelAlign"
        >
          <el-form-item label="appid" class="tenant-info">
            <el-input v-model="formLabelAlign.miniAppid"></el-input>
          </el-form-item>
          <el-form-item label="小程序秘钥" class="tenant-info">
            <el-input v-model="formLabelAlign.miniSecret"></el-input>
          </el-form-item>
          <el-form-item label="商户号" class="tenant-info">
            <el-input v-model="formLabelAlign.merchantId"></el-input>
          </el-form-item>
          <el-form-item label="商户密钥" class="tenant-info">
            <el-input v-model="formLabelAlign.merchantSecret"></el-input>
          </el-form-item>
          <el-form-item label="cert文件" class="tenant-info">
            <el-upload
              class="upload-demo"
              action="/config/set-mini"
              name="cert"
              multiple
              :limit="1"
              :http-request="upFile"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">企业付款设置</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="key文件" class="tenant-info">
            <el-upload
              class="upload-demo"
              action="/config/set-mini"
              name="key"
              multiple
              :limit="1"
              :http-request="upFile"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">企业付款设置</div>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="营业时间" name="second">
        <el-switch
          v-model="timeKey"
          class="huakuai"
          style="display: block"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="开店营业"
          inactive-text="关店休息"
          @change="chageTimeKey"
        >
        </el-switch>
        <el-time-select
          class="interval"
          placeholder="起始时间"
          v-model="startTime"
          :picker-options="{
            start: '06:00',
            step: '00:15',
            end: '23:50',
          }"
        >
        </el-time-select>
        <el-time-select
          class="interval"
          placeholder="结束时间"
          v-model="endTime"
          :picker-options="{
            start: '06:00',
            step: '00:15',
            end: '23:50',
            minTime: startTime,
          }"
        >
        </el-time-select>
        <el-button type="primary" @click="setCofTime">保存</el-button>
        <div style="margin-top: 10px">
          <el-input
            v-model="publish"
            style="width: 300px"
            placeholder="请输入小程序公告"
          ></el-input>
          <el-button
            style="margin-left: 10px"
            type="primary"
            @click="setConfigQiTa('publish', publish)"
            >保存公告</el-button
          >
        </div>
      </el-tab-pane>

      <el-tab-pane label="上传logo" name="third">
        <h3>暂时未更新上线</h3>
        <el-form
          class="logo-box"
          label-position="right"
          label-width="auto"
          :model="formLabelAlign"
        >
          <el-form-item label="上传左边logo" class="tenant-info">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="上传中间logo" class="tenant-info">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="上传右边logo" class="tenant-info">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

          <el-form-item label="上传客服微信" class="tenant-info">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  apiGetConfig,
  apiSetConfig,
  apiGetCofTime,
  apiSetCofTime,
  apiSetConfigQiTa,
  apiGetConfigQiTa,
} from "@/api/config";
export default {
  name: "config",
  data() {
    return {
      activeName: "first",
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
      },
      startTime: "",
      endTime: "",
      timeKey: false,
      publish: "",
      imageUrl: "",
    };
  },
  mounted() {
    this.getConfig();
    this.getCofTime();
    this.getConfigQiTa("publish");
  },
  methods: {
    getConfig() {
      apiGetConfig().then((res) => {
        var { merchantId, merchantSecret, miniAppid, miniSecret } = res.data;
        this.formLabelAlign = {
          merchantId,
          merchantSecret,
          miniAppid,
          miniSecret,
        };
      });
    },
    onSubmit() {
      apiSetConfig(this.formLabelAlign).then((res) => {
        if (res.code == 200) {
          this.$message.success("保存成功");
          return false;
        }
        this.$message.success("保存失败");
      });
    },
    upFile(file) {
      this.formLabelAlign[file.filename] = file.file;
    },
    getCofTime() {
      apiGetCofTime().then((res) => {
        this.startTime = res.data.start_time;
        this.endTime = res.data.end_time;
        if (this.startTime == "00:00" && this.endTime == "00:00") {
          this.timeKey = false;
        } else {
          this.timeKey = true;
        }
      });
    },
    setCofTime() {
      if (!this.startTime && !this.endTime) {
        this.$$message.error("请选择时间");
        return false;
      }
      apiSetCofTime(this.startTime, this.endTime).then((res) => {
        if (res.code == 200) {
          this.$message.success("设置成功");
          return false;
        }
        this.$message.error("设置失败");
      });
    },
    chageTimeKey() {
      console.log(this.timeKey);
      if (this.timeKey) {
        this.startTime = "06:00";
        this.endTime = "18:00";
      } else {
        this.startTime = this.endTime = "00:00";
      }
    },
    getConfigQiTa(key) {
      apiGetConfigQiTa(key).then((res) => {
        this[key] = res.data.config_value;
      });
    },
    setConfigQiTa(key, value) {
      apiSetConfigQiTa(key, value).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$message.success("保存成功");
        } else {
          this.$message.error("失败");
        }
      });
    },
  },
};
</script>

<style scoped>
.interval {
  margin-right: 10px;
}
.config-info {
  margin: 20px;
}

.tenant-info {
  width: 400px;
}
.huakuai {
  margin-bottom: 10px;
}

.avatar-uploader >>> .el-upload {
  border: 1px dashed #adabab;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.logo-box {
  display: flex;
  flex-wrap: wrap;
}
.avatar-uploader >>> .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>